import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  Form,
  Input,
  message,
  Modal,
  Pagination,
  Space,
  Table,
  Tag,
  Upload,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  LoadingOutlined,
} from "@ant-design/icons";
import { ColumnsType } from "antd/lib/table";
import { getBase64, reqGetShopSetList } from "@api/shop/shopSet";
import type { ShopSetList } from "@/api/shop/model/shopSetTypes";
import { useForm } from "antd/es/form/Form";
import { UploadChangeParam } from "antd/lib/upload";
import type { RcFile, UploadFile, UploadProps } from "antd/es/upload/interface";





export default function ShopSet() {
  let columns: ColumnsType<any> = [
    {
      title: "序号",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "品牌名称",
      dataIndex: "tmName",
    },
    {
      title: "品牌LOGO",
      dataIndex: "logoUrl",
    },
    {
      title: "操作",
      render: () => {
        return (
          <div>
            <Button icon={<EditOutlined />} type="primary">
              修改
            </Button>
            <Button
              className="ml"
              icon={<DeleteOutlined />}
              danger
              type="primary"
            >
              删除
            </Button>
          </div>
        );
      },
    },
  ];

  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);
  let [total, setTotal] = useState(100);

  let [shopSetList, setShopSetList] = useState<ShopSetList>([]);

  let getShopList = async (page = current, limit = pageSize) => {
    let result = await reqGetShopSetList({ page, limit });
    setShopSetList(result.records);
    setTotal(result.total);
  };
  //添加对话框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //添加对话框结束

  //表单

  const beforeUpload = (file: RcFile) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  };


    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();
  
    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
      if (info.file.status === 'uploading') {
        setLoading(true);
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj as RcFile, url => {
          setLoading(false);
          setImageUrl(url);
        });
      }
    };

    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );

  let [form] = useForm();
  let finish = () => {
    let values = form.getFieldsValue();
    console.log(values);
  };

  useEffect(() => {
    reqGetShopSetList({ page: 1, limit: 5 });
  });

  useEffect(() => {
    getShopList();
  }, [current, pageSize]);

  return (
    <Card>
      <Card>
        <Button
          icon={<PlusOutlined />}
          type="primary"
          shape="round"
          onClick={showModal}
        >
          添加
        </Button>
      </Card>

      <Modal
        title="添加品牌"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Form name="basic" onFinish={finish} form={form}>
          <Form.Item
            label="品牌名称"
            name="username"
            rules={[{ required: true, message: "品牌名称必须写哦" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            name="logoUrl"
            label="品牌LOGO"
            valuePropName="fileList"
            rules={[{ required: true, message: "图片必须添加哦" }]}
          >
            
            <Upload
      name="avatar"
      listType="picture-card"
      className="avatar-uploader"
      showUploadList={false}
      action="/app-dev/admin/product/upload"
      beforeUpload={beforeUpload}
      onChange={handleChange}
    >
      {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
    </Upload>
            
          </Form.Item>
          <div style={{ marginTop: 8 }}>上传的图片必须是jpg且不能大于2M</div>
          <Form.Item>
            <Button htmlType="button" onClick={handleCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" onClick={handleOk}>
              确定
            </Button>
          </Form.Item>
        </Form>
      </Modal>

      <Card>
        <Table
          columns={columns}
          dataSource={shopSetList}
          bordered
          rowKey="id"
          pagination={{
            total: total,
            pageSize: pageSize,
            current: current,
            showQuickJumper: true,
            pageSizeOptions: [2, 5, 10, 15],
            showSizeChanger: true,
            showTotal: (total) => {
              return <span>共 {total} 条</span>;
            },
            onChange: (page: number, pageSize: number) => {
              setCurrent(page);
              setPageSize(pageSize);
            },
          }}
        />
      </Card>
    </Card>
  );
}